<template>
  <q-dialog
    ref="dialog"
    persistent
    transition-show="scale"
    transition-hide="scale"
    :model-value="modelValue"
    @update:model-value="(val) => emit('update:modelValue', val)"
  >
    <div class="column dialog q-pa-md">
      <div class="title text-center">Change Your Password</div>
      <div class="sub-title text-center q-mb-md">
        Enter your current password and a new password
      </div>
      <q-form ref="form" class="q-gutter-y-md" @submit="validate">
        <q-input
          filled
          outlined
          type="password"
          color="accent"
          bg-color="black"
          v-model="currentPassword"
          label="Current Password"
          :rules="[ruleHelpers.required]"
        />
        <q-input
          filled
          outlined
          color="accent"
          bg-color="black"
          v-model="newPassword"
          label="New Password"
          type="password"
          :rules="[ruleHelpers.required, ruleHelpers.passwordRule]"
        />
        <q-input
          filled
          outlined
          type="password"
          color="accent"
          bg-color="black"
          v-model="confirmPassword"
          label="Confirm New Password"
          :rules="[ruleHelpers.required, ruleHelpers.passwordRule]"
        />
        <q-separator dark />
        <div class="row">
          <q-space />
          <q-btn flat v-close-popup>Cancel</q-btn>
          <q-btn rounded color="accent" type="submit">Done</q-btn>
        </div>
      </q-form>
    </div>
    <!-- <q-card class="dialog">
      <q-card-section class="q-pa-none q-pt-md"></q-card-section>
      <q-card-section></q-card-section>
    </q-card>-->
  </q-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { ruleHelpers } from 'src/utils/validationRules';
import { useQuasar, QForm, QDialog } from 'quasar';
import { useUserStore } from 'stores/user-store';
const userStore = useUserStore();
const $q = useQuasar();
defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);
const form = ref<QForm>();
const dialog = ref<QDialog>();
const currentPassword = ref('');
const newPassword = ref('');
const confirmPassword = ref('');
async function validate() {
  const isSuccess = await form.value!.validate();
  if (isSuccess) {
    await submit();
  } else {
    dialog.value!.shake();
  }
}
async function submit() {
  await userStore
    .setUserInfo({
      password: currentPassword.value,
      newPassword: newPassword.value,
    })
    .catch((error) => {
      $q.dialog({
        title: 'Error',
        message: error.message,
      });
      return;
    });
  emit('update:modelValue', false);
}
</script>
<style lang="sass" scoped>

.dialog
  width: 386px
  background-image: linear-gradient(to bottom right, #2a2a2a, #1e1e1e)
  .title
    font-size: 16px
  .sub-title
    font-size: 14px
    color: $sub
</style>
